<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="div1"></div>

    <script>
        var div = document.querySelector('.div1');

        // 按下鼠标 准备拖拽
        div.addEventListener('mousedown', function() {
            var e = event;
            // xy是接触点在div中的坐标 或者说是 点在了div的哪个位置
            var x = e.offsetX;
            var y = e.offsetY;
            // 这个xy的值不应该变化 
            // 鼠标开始移动，前提是mousedown
            document.onmousemove = function() {
                // 这里移动是在document中移动 不是在div里晃悠 div和鼠标要保持相对静止
                // div在document中移动 而不是 鼠标在div中移动
                var left = event.clientX;
                var top = event.clientY;
                // div开始移动
                div.style.top = (top-y)+'px';
                div.style.left = (left-x)+'px';
            }
        })

        div.addEventListener('mouseup', function() {
            // 松开鼠标 注销事件
            document.onmousemove = null;
        })
    </script>
</body>

</html>